// 严格模式
"use strict";

/***************************************1.字符串使用*********************************/
function stringuse() {
    var  ele = document.getElementById('string_use');

    ele.innerText = '/ ***************************************1.字符串使用********************************/' +
        '//1、字符串就是用\'\'或""括起来的字符表示\n' +
        '    var  string1 = "I\'m Ok";  //6个字符\n' +
        '    var  length =string1.length;\n' +
        '\n' +
        '    // 2、转义字符\n' +
        '    // \\n表示换行         \\n\n' +
        '    // \\t表示制表符，      \\t\n' +
        '    // 字符\\本身也要转义    \\\\\n' +
        '    //ASCII字符           \'\x41\'; // 完全等同于 \'A\'\n' +
        '    //Unicode字符转义      \'\u4e2d\u6587\'; // 完全等同于 \'中文\'\n' +
        '\n' +
        '    // 3.多行字符串 反引号 ` ... `\n' +
        '      console.log(`多行\n' +
        '      字符串\n' +
        '      测试`)\n' +
        '\n' +
        '    //4、字符串加法\n' +
        '      var  name = \'小明\';\n' +
        '      var  age = 12;\n' +
        '      var  message = \'你好\' + name + \',您今年\' + age + \'岁了\';\n' +
        '      var  message2 = `您好${name}，您今年${age}岁了`;  //ES6 新增模板字符串\n' +
        '\n' +
        '    // 5、操作字符串\n' +
        '     var  s = \'hello world!\';\n' +
        '     s.length;  //字符串长度\n' +
        '     s[0];  //字符串类似数组 取第一个数据\n' +
        '     s[0] = \'x\';  //不会错，但是没有效果 字符串是不可以变的\n' +
        '\n' +
        '    //6、字符串属性和方法链接\n' +
        '    var url = \'http://www.runoob.com/js/js-strings.html\'; ';
}

/***************************************2.数组使用*********************************/
//2.数组使用
function arrayUse() {
    var ele = document.getElementById('array_use');
    ele.innerText = '\n\n/***************************************2.数组使用*********************************/\n' +
        '//1. 数组的定义\n' +
        '    var  arr = [1, 2, 3, 4];\n' +
        '    var  arr2 = new  Array();\n' +
        '    var  arr3 = new  Array(1,2,3,4);\n' +
        '\n' +
        '    //2.数组的取值和赋值\n' +
        '    arr[1] = 666;\n' +
        '    var value = arr.indexOf(1);  // 元素1的索引为0\n' +
        '\n' +
        '    //3.数组的方法\n' +
        '\n' +
        '    arr.slice(0,2); //// 从索引0开始，到索引2结束，但不包括索引2: [1,2]\n' +
        '\n' +
        '    var  arrcopy =arr.slice();  //复制一个Array\n' +
        '\n' +
        '    //从尾部开始操作push pop\n' +
        '    var arrpop = [1, 2];\n' +
        '    arrpop.push(\'A\', \'B\'); // 返回Array新的长度: 4\n' +
        '    arrpop; // [1, 2, \'A\', \'B\']\n' +
        '\n' +
        '    arrpop.pop(); // pop()返回\'B\'\n' +
        '    arrpop; // [1, 2, \'A\']\n' +
        '\n' +
        '    arrpop.pop(); arrpop.pop(); arrpop.pop(); // 连续pop 3次\n' +
        '    arrpop; // []\n' +
        '\n' +
        '    arrpop.pop(); // 空数组继续pop不会报错，而是返回undefined\n' +
        '    arrpop; // []\n' +
        '\n' +
        '    //从头开始操作unshift和shift\n' +
        '\n' +
        '    arr.sort();  //默认顺序排序\n' +
        '\n' +
        '    arr.reverse() // 翻转\n' +
        '\n' +
        '    arr.splice()  //修改Array的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素\n' +
        '\n' +
        '    arr.concat()  //连接多个数组\n' +
        '\n' +
        '    arr.join()  //插入分割符号';

}

/***************************************3.对象使用*********************************/
//3.对象使用 万物皆对象 对象只是一种特殊的数据。对象拥有属性和方法。 JavaScript 类 JavaScript 基于 prototype，而不是基于类的
function objectUse() {
    var  ele = document.getElementById('object_use');
    ele.innerText = '\n\n/***************************************3.对象使用*********************************/\n' +
        '//1.对象的定义  键值对以xxx: xxx形式申明，用,隔开  \'xxx\' : value 此时的xxx属性名包含特殊字符，就必须用\'\'括起来\n' +
        '    var person = {\n' +
        '        name : \'zibin\',\n' +
        '        age : 26,\n' +
        '        sex: true,\n' +
        '        color : \'white\',\n' +
        '        driveCar : function () {\n' +
        '             console.log(this.name + \'在开车\');\n' +
        '        },\n' +
        '        \'特殊字符串\' : \'12\',\n' +
        '    };\n' +
        '\n' +
        '    var  person2 = new Object();\n' +
        '    person2.firstname="Bill";\n' +
        '    person2.lastname="Gates";\n' +
        '    person2.age=56;\n' +
        '    person2.eyecolor="blue";\n' +
        '\n' +
        '\n' +
        '    //构造器创建\n' +
        '    function person(firstName,lastname,age2,eyecolor2){\n' +
        '        this.firstName = firstName;\n' +
        '        this.lastname =  lastname;\n' +
        '        this.age2 = age2;\n' +
        '        this.eyecolor2 = eyecolor2;\n' +
        '\n' +
        '        this.changeName = changeName;\n' +
        '        function changeName(newName) {\n' +
        '              this.firstName = newName;\n' +
        '        }\n' +
        '    }\n' +
        '\n' +
        '\n' +
        '    //2.属性访问  objectName.propertyName\n' +
        '    person.age;\n' +
        '    person[\'sex\'];\n' +
        '    person[\'特殊字符串\']; //特殊字符串必须用[\'xxx\']来访问\n' +
        '\n' +
        '\n' +
        '    //3.方法访问  objectName.methodName()\n' +
        '    person.driveCar();\n' +
        '\n' +
        '\n' +
        '    //4.其他方法\n' +
        '    delete  person.age;  //删除属性\n' +
        '    person.hasOwnProperty(\'color\');  //判断是否有这个属性';

}


/***************************************4.ES6新增类型使用*********************************/
//4.ES6新增类型使用Map set
function es6addTypeUse() {
      var  ele = document.getElementById('es6_add_type_use');
     ele.innerText = '\n/***************************************4.ES6新增类型使用*********************************/\n' +
         ' //1.Map是一组键值对的结构，具有极快的查找速度\n' +
         '\n' +
         '      //定义map\n' +
         '       var  mm = new Map([[\'a\', 15],[\'b\', 3], [\'c\', 4]]);\n' +
         '       console.log(mm.get(\'a\'));\n' +
         '\n' +
         '        //定义map\n' +
         '        var m = new Map(); // 空Map\n' +
         '        m.set(\'Adam\', 67); // 添加新的key-value\n' +
         '        m.set(\'Bob\', 59);\n' +
         '        m.has(\'Adam\'); // 是否存在key \'Adam\': true\n' +
         '        m.get(\'Adam\'); // 67\n' +
         '        m.delete(\'Adam\'); // 删除key \'Adam\'\n' +
         '        m.get(\'Adam\'); // undefined\n' +
         '\n' +
         '     // 2.Set  Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key\n' +
         '\n' +
         '        var  s = new Set();  // 空Set\n' +
         '        var  ss = new Set([1,2,3]); // 含1, 2, 3\n' +
         '         s.add(4);\n' +
         '         s.add(4);  //可以重复增加，但是只保留一份\n' +
         '\n' +
         '\n' +
         '    //3、新的iterable类型，Array、Map和Set都属于iterable类型 遍历Map和Set就无法使用下标\n' +
         '        var a = [\'A\', \'B\', \'C\'];\n' +
         '        var s = new Set([\'A\', \'B\', \'C\']);\n' +
         '        var m = new Map([[1, \'x\'], [2, \'y\'], [3, \'z\']]);\n' +
         '        for (var x of a) { // 遍历Array\n' +
         '            console.log(x);\n' +
         '        }\n' +
         '        for (var x of s) { // 遍历Set\n' +
         '            console.log(x);\n' +
         '        }\n' +
         '        for (var x of m) { // 遍历Map\n' +
         '            console.log(x[0] + \'=\' + x[1]);\n' +
         '        }\n' +
         '\n' +
         '    //4. iterable内置的forEach方法，它接收一个函数，每次迭代就自动回调该函数\n' +
         '        a.forEach(function (element, index, array) {\n' +
         '            // element: 指向当前元素的值\n' +
         '            // index: 指向当前索引\n' +
         '            // array: 指向Array对象本身\n' +
         '            console.log(element + \', index = \' + index);\n' +
         '        });';


}
